<template>
	<view class="publing">
		<view class="pub_title">创建圈子</view>
		<view class="pubform">
			<view class="pubtable">
				<view class="table_box">
					<view class="table_name">圈子名</view>
					<input class="table_input" v-model="pubinfo.title" type="text" placeholder="请输入" placeholder-style="font-size: 30rpx;color: #9F9F9F;"></input>
				</view>
				<view class="table_box">
					<view class="table_name">圈子标语</view>
					<input class="table_input" v-model="pubinfo.content" type="text" placeholder="请输入" placeholder-style="font-size: 30rpx;color: #9F9F9F;"></input>
				</view>
				<view class="table_box">
					<view class="table_name">家族头像</view>
					<image v-if="pubinfo.avatar" class="table_avtar" :src="photo_cdn+pubinfo.avatar"></image>
					<view v-else class="table_img" @tap="uploadimg">
						<view class="add">+</view>
						<view class="txt">图片</view>
					</view>
				</view>
				<view class="table_box" @tap="toselectpage">
					<view class="table_name">姓氏</view>
					<input class="table_input" v-model="select_surname_name" type="text" :disabled="true" placeholder="请选择" placeholder-style="font-size: 30rpx;color: #9F9F9F;"></input>
				</view>
				<lpicker v-model="trueAddr" @clearelech="clearelech" @select="lpicker_select">
					<view class="table_box">
						<view class="table_name">所在地区</view>
						<input class="table_input" v-model="trueAddr" type="text" :disabled="true" placeholder="请选择" placeholder-style="font-size: 30rpx;color: #9F9F9F;"></input>
					</view>
				</lpicker>
			</view>
		</view>
		
		<view class="accordtag">
			<view class="radioview">
				<radio @tap="radioChange" :checked="isAgree" :color="$themecolor" />已阅读并同意
				<text @tap="totreaty" class="atag">《用户协议》</text>
				用户协议中关于发布族志和圈子的说明策略
			</view>
			
		</view>
		
		<view class="pubcreate" @tap="tocreate">
			<view class="pub_btn">确认创建</view>
		</view>
	</view>
</template>

<script>
	import config from "@/utils/config.js";
	let {uploadFile,photo_cdn} = config.baseUrl;
	import lpicker from "@/components/lpicker/lpicker.vue";
	import {createCircle} from "@/utils/api/user.js"
	export default{
		components:{
			lpicker
		},
		data(){
			return{
				photo_cdn,
				isAgree:false,
				pubinfo:{
					title:'',//圈子名称
					content:'',//圈子标语、					
					avatar:'',//圈子头像,
					surname:'',//圈子姓氏								
				},
				select_surname_name:"",
				trueAddr:'',//圈子地址,
				province_id:'',
				city_id:'',
				area_id:'',
				town_id:'',
				village_id:''	
			}
		},
		onShow(){
			let select_surname_name = uni.getStorageSync("select_surname_name");
			this.select_surname_name = select_surname_name;
			let st_surname_id = uni.getStorageSync("st_surname_id");
			if(select_surname_name){
				uni.setStorageSync("select_surname_name","");
				uni.setStorageSync("st_surname_id","");				
				this.pubinfo.surname = st_surname_id;
			}
		},
		methods:{
			//上传图片
			uploadimg(){
				uni.chooseImage({
					count:1,
					sourceType:['album','camera'],//album 从相册选图，camera 使用相机
					success: (e) => {
						uni.uploadFile({
						    url: uploadFile, 
						    filePath: e.tempFilePaths[0],
						    name: 'file',
							header:{
								'token':uni.getStorageSync("token"),
							},
						    formData: {
						       "Content-Type": "multipart/form-data",
						       water: 0
						    },
						    success: (res) => {
								let {data} = JSON.parse(res.data)
								console.log('多选',data);
								// data.url
								this.pubinfo.avatar = data.url;
								
						    },
							fail: (err) => {
								this.$api.msg("上传图片失败");
							}
						});
					}
				});
			},
			toselectpage(){
				uni.navigateTo({
					url:"/pages/zupu/choice_surname/choice_surname?source=1",
				})
			},
			//清楚选中的五级地址数据
			clearelech(e){
				this.province_id = "";
				this.city_id = "";
				this.area_id = "";
				this.town_id = "";
				this.village_id = "";
			},
			//监听五级地址选中
			lpicker_select(e){
				this.province_id = e.province_id;
				this.city_id = e.city_id;
				this.area_id = e.area_id;
				this.town_id = e.town_id;
				this.village_id = e.village_id;
			},
			tocreate(){
				if(!this.pubinfo.title){
					this.$api.msg('请输入圈子名称 ~');
					return false;
				}
				if(!this.pubinfo.content){
					this.$api.msg('请输入圈子标语 ~');
					return false;
				}
				if(!this.pubinfo.avatar){
					this.$api.msg('请选择圈子头像 ~');
					return false;
				}
				if(!this.pubinfo.surname){
					this.$api.msg('请选择圈子姓氏 ~');
					return false;
				}
				if(!this.isAgree){
					this.$api.msg("请阅读并同意用户协议!");
					return false;
				}
				createCircle({
					...this.pubinfo,
					addr:this.trueAddr
				}).then(res=>{
					this.$api.msg(res.msg)
					if(res.code==1){
						setTimeout(()=>{
							
						},1500)
					}
				})
			},
			//用户协议
			totreaty(){
				uni.navigateTo({
					url:"/pages/mine/agreement/agreementuser"
				})
			},
			//单选框
			radioChange(e){
				this.isAgree = !this.isAgree;
			},
		}
	}
</script>

<style lang="scss">
	@import "./publing.scss"
</style>